<template>
	<view class="container">
		<view class="button-group" @click="goToUploadVideo">
			<view class="button">
				<image src="/static/images/ship.png" class="icon"></image>
			</view>
			<view class="text-container">
				<text class="label">视频</text>
				<text class="description">15秒灯光效果</text>
			</view>
		</view>
		<view class="button-group" @click="photoAlbum">
			<view class="button">
				<image src="/static/images/tupian.png" class="icon"></image>
			</view>
			<view class="text-container">
				<text class="label">图片</text>
				<text class="description">进入相册或拍照</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			goToUploadVideo(){
				uni.navigateTo({
					url: `/pages/commponent/upload_video?type=Video`
				});
			},
			photoAlbum() {
				// 打开相机拍照
				uni.chooseImage({
					count: 9, // 只能选择一张图片
					sourceType: ['album'], // 允许使用相册
					sizeType: ['compressed'], // 开启压缩
					success: (res) => {
						// 获取图片路径
						const filePaths = res.tempFilePaths;
						console.log('识别成功，图片路径:', filePaths);
						uni.navigateTo({
							url: `/pages/commponent/release_case?imagePaths=${encodeURIComponent(JSON.stringify(filePaths))}&type=Picture`
						});
					},
					fail: (err) => {
						console.error('识别取消:', err);
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 100vh;
		/* 占据整个屏幕高度 */
		padding: 20px;
		/* 内边距，防止内容紧贴屏幕边缘 */
	}

	.button-group {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		margin-bottom: 80px;
		/* 每个按钮组之间的间距 */
	}

	.button {
		width: 80px;
		height: 80px;
		background-color: #00C7A0;
		/* 绿色背景 */
		border-radius: 50%;
		/* 圆形 */
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		/* 添加阴影效果 */
	}

	.icon {
		width: 40px;
		height: 40px;
	}

	.text-container {
		display: flex;
		flex-direction: column;
		margin-left: 40px;
		/* 文字容器与按钮的间距 */
		width: 100px;
		/* 固定宽度，确保对齐 */
	}

	.label {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.description {
		font-size: 14px;
		color: #666;
		margin-top: 4px;
		/* 标签和描述之间的间距 */
	}
</style>